<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 按钮区 -->
      <div class="search-wrapper">
        <ul class="search-box">
          <li class="block">
            <span class="demonstration">巡河年月</span>
            <el-date-picker
                    v-model="listQuery.time"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM"
                    type="month"
                    placeholder="选择年月"
                    :picker-options="pickerOptions0">
            </el-date-picker>
          </li>
          <li><span class="filter-name">河道等级：</span>
            <el-select v-model="listQuery.riverLevel" placeholder="请选择" clearable style="width:150px"
                       class="filter-item">
              <!--<el-option v-for="(item,index)  in options"  :label="item.riverLevel1"
                         :key="index" :value="item.riverLevel"/>-->
              <el-option v-for="item in options" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
            </el-select>
          </li>
          <!--<li><span class="filter-name">巡河员类型：</span>
            <el-select v-model="listQuery.roleName" placeholder="请选择" clearable style="width:150px"
                       class="filter-item">
              <el-option v-for="(item,index) in options"  :label="item.roleName1"
                         :key="index" :value="item.roleName"/>
            </el-select>
          </li>
          <li><span class="filter-name">河道名称：</span>
            <el-select v-model="listQuery.riverName" placeholder="请选择" clearable style="width:150px"
                       class="filter-item">
              <el-option v-for="(item,index) in options"  :label="item.riverName1"
                         :key="index" :value="item.riverName"/>
            </el-select>
          </li>-->
          <li style="padding-left:10px;">
            <el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary"
                       @click="getList()">查询
            </el-button>
          </li>
        </ul>

      </div>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData!=null">
            <el-table  :row-class-name="tableRowClassName" ref="multipleTable" :data="tableData"
                       tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" label="序号" width="70" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="riverId" label="河道编号" width="120">
              </el-table-column>
              <el-table-column prop="riverName" label="河道名称" width="120">
              </el-table-column>
              <el-table-column prop="riverLevel.name" label="河道等级" width="120">
              </el-table-column>
              <el-table-column prop="riverFlow" label="流经区域" width="120">
              </el-table-column>
              <el-table-column prop="roleName" label="巡河员类型" width="120">
              </el-table-column>
              <el-table-column prop="riverManage" label="巡河员名称" width="120">
              </el-table-column>
              <el-table-column prop="time" label="时间" width="160">
              </el-table-column>
              <el-table-column prop="times" label="巡河次数"  >
                  <template slot-scope="scope">
                    <span @click="queryTimes(scope.$index, scope.row)"><el-button type="text">{{scope.row.times}}</el-button></span >
                  </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.page"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>

      <el-dialog title="巡河次数详情" :visible.sync="dialogFormVisible">
          <el-table :data="timesDetail">
              <el-table-column type="index" label="次数" width="100" :index="indexMethod">
              </el-table-column>
              <el-table-column property="patrolStartTime" label="巡河开始时间"></el-table-column>
              <el-table-column property="patrolEndTime" label="巡河结束时间"></el-table-column>
              <el-table-column property="" label="GIS"></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="dialogFormVisible = false">关闭</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                options:[],
                timesDetail:[],//巡河的每次的时间
                timesOperate:[],//巡河名和人员名称
                tableData: [],
                //默认数据总数
                dataCount: 100,
                pageSizes: [5, 10, 20, 30, 40],
                //查询条件
                listQuery: {
                    page: 1,
                    limit: 5
                },
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                chcek: false,//查看时显示,默认隐藏选项
                isView: true,//保存按钮是否显示，默认显示
                listSelect: [],
                dialogFormVisible: false,
                showDialog: false,
                editdialogForm: false,
                loading: false,
                dis:true,
                form: {},
                oneCol: {},
                formLabelWidth: '100px',
                row:''
            }
        },
        created() {

        },
        mounted() {
            this.getList(); //初始化页面是数据
            /*this.getOption() //对下拉框取值*/
            this.getTypeOption();
        },
        updated() {
        },
        destroyed() {
        },
        methods: {
            // 状态翻译
            formatState: function (row, column) {
                return row.parts_state == 0 ? "启用" : "停用";
            },
            // 页面刷新
            getList() {
                this.loading = true;
                console.log('www',this.listQuery);
                this.postRequest('/api/rcs/getPatrolList', this.listQuery).then((res) => {
                    var data = res.data;
                    console.log(data);
                    if (data.status == 200) {
                        this.tableData = data.data;
                        this.dataCount = data.count;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false
                }).catch(error => { //错误信息
                    this.$message.error(error);
                })
            },
            getTypeOption() {
                this.getDictionary({types:["RIVER_TYPE"]}).then(res => {
                    var data = res.data;
                    if (data.status == 200) {
                        this.options = data.data["RIVER_TYPE"];
                    } else {
                        this.$message.error(data.msg);
                    }
                }) .catch(error => {
                    //错误信息
                    this.$message.error(error);
                });
            },
            getOption() {
                this.postRequest('/api/rcs/getOptions').then((res) => {
                    console.log(res);
                    this.options = res.data.data;
                }).catch((error) => {//错误信息
                    console.log(error)
                })
            },
            //关闭
            partsCancel(form){
                this.$refs[form].resetFields();
                this.dialogFormVisible = false;
            },
            indexMethod(index) {
                return index + 1;
            },
            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.limit = size;
                this.listQuery.page = 1;
                this.getList()
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.page = currentPage;
                this.getList()
            },
            tableRowClassName ({row, rowIndex}) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },
            handleRowChange(row){
                console.log(row ,row.index);
                this.form = JSON.parse(JSON.stringify(this.tableData[row.index]));
                this.dialogFormVisible=true;
            },
            //查看巡河次数的具体信息
            queryTimes(index, row){
                this.loading = true;
                this.postRequest('/api/rcs/getTimesList',{totalId:row.totalId }).then((res) => {
                    var data = res.data;
                    console.log('data',data.data);
                    if (data.status == 200) {
                        this.timesDetail=data.data;
                        this.timesOperate=row.riverName;
                        this.timesOperate=row.riverManage;
                        this.dialogFormVisible=true;
                        /*this.tableData = data.data;
                        this.dataCount = data.count;*/
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false
                }).catch(error => { //错误信息
                    this.$message.error(error);
                })

            }
        }
    }
</script>
<style scoped>

</style>
